<template>
<div class="CxjXsscHistory">
    <j-modal
        class="xshistory"
        title="形审记录"
        :visible="visible"
        :width="1400"
        :maskClosable="false"
        :switchFullscreen="switchFullscreen"
        @cancel="handleCancel"
        :footer="null">
        <div class="historylist">
            <div class="historylist_right">
                <div>
                    <p class="xslist_right_title2">申报材料信息</p>
                    <div class="tableList xstableList">
                        <div>
                            <div class="table_head">
                                <p class="flex0">序号</p>
                                <p class="flex2">材料审查项</p>
                                <p class="flex01">是否合格</p>
                                <p class="flex02">说明</p>
                            </div>
                            <div class="table_cont" v-if="queryxslist.length">
                                <div class="table_contli" v-for="(item, index) in queryxslist" :key="index">
                                    <div class="flex_box">
                                        <div class="xsindex flex0">{{index+1}}</div>
                                        <div class="xswtinfo flex2">
                                            <div class="xswtLbmc">{{item.xswtLbmc}}</div>
                                            <div class="xswtlist">
                                                <div class="xswtdetail" v-for="(item1, index1) in item.List" :key="index1">
                                                    <div class="xswtMc">{{item1.xswtMc}}</div>
                                                    <div class="xsselect">{{item1.xsscSffh=='Y'?'合格':item1.xsscSffh=='N'?'不合格':''}}</div>
                                                    <div class="xsarea">{{item1.xsscBz}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </j-modal>
</div>
</template>

<script>
import {
    queryByFlId,
} from "@/api/api"
import {
    queryHistory,
    queryXsscMxByXsscId
} from "@/api/manage"
export default {
	name: 'CxjXsscHistory',
	props: ['expertFlag', 'recordId','flId','cxjXszt'],
	data () {
		return {
            visible: false,
            switchFullscreen: true,
            historylist: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    width:60,
                    align:"center",
                    customRender:function (t,r,index) {
                        return parseInt(index)+1;
                    }
                },
                {
                    title:'形审人',
                    align:"center",
                    dataIndex: 'createBy',
                    width:147,
                },
                {
                    title:'时间',
                    align:"center",
                    dataIndex: 'createTime',
                    width:147,
                },
                {
                    title:'形审结果',
                    align:"center",
                    dataIndex: 'xsscJg',
                    width:147,
                    customRender: function(xsscJg){
                        return xsscJg == 0 ? '暂存': xsscJg == 304?'通过':xsscJg == 303?'不通过':'补正'
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align:"center",
                    fixed:"right",
                    width:147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            dictOptions:{},
            superFieldList:[],
            fileStatus: "",
            selectedRowKeys: [],
            selectionRows: [],
            loading: false,
            isorter: {
                column: 'createTime',
                order: 'desc',
            },
            dataSource: [],
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            queryxsmxlist: [],
            queryxslist: [],
            queryIdList: [],
		}
	},
	watch: {
		expertFlag(next, prev) {
			if (next != prev) {
				var self = this;
				self.visible = !self.visible;
                self.getqueryByFlId();
			}
		}
	},
	methods: {
        handleCancel(){
            this.visible = false;
        },
        getqueryHistory() {
            var self = this;
            queryHistory(self.recordId).then(res=>{
                if (res.code=='200') {
                    self.dataSource = res.result;
                    if (res.result.length) {
                    }
                }
            })
        },
        getqueryByFlId() {
            const self = this;
            queryByFlId({id:self.flId}).then(res=>{
                if (res.code=='200') {
                    if (self.cxjXszt) {
                        this.getqueryXsscMxByXsscId(self.cxjXszt)
                    } else {
                        this.queryxslist = [];
                    }
                    // this.queryxslist = res.result;
                    this.queryIdList = res.result;
                }
            })
        },
        getqueryXsscMxByXsscId(id) {
            queryXsscMxByXsscId(id).then(res=>{
                this.queryxsmxlist = res.result;
                for (var i=0;i<this.queryIdList.length;i++) {
                    this.queryIdList[i].xsscSffh = '';
                    this.queryIdList[i].xsscBz = '';
                    for (var j=0;j<this.queryxsmxlist.length;j++) {
                        if (this.queryIdList[i].xswtBh == this.queryxsmxlist[j].xswtBh) {
                            this.queryIdList[i].xsscSffh = this.queryxsmxlist[j].xsscSffh;
                            this.queryIdList[i].xsscBz = this.queryxsmxlist[j].xsscBz;
                        }
                    }
                }
                this.queryxslist = this.sortarr(this.queryIdList);
            })
        },
        sortarr(arr) {
            let dataArr = [];
            arr.map(mapItem => {
                if (dataArr.length == 0) {
                    dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                } else {
                    let res = dataArr.some(item=> {
                        if (item.xswtLb == mapItem.xswtLb) {
                            item.List.push(mapItem)
                            return true
                        }
                    })
                    if (!res) {
                        dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                    }
                }
            })
            return dataArr
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
	}
}
</script>
<style lang="less">
.xshistory {
    &.fullscreen  {
        .ant-modal {
            width: 100%!important;
            top: 0!important;
            height: 100%!important;
            .ant-modal-content {
                max-height: 100%!important;
                height: 100%!important;
                .ant-modal-body {
                    margin-top: 0;
                }
            }
        }
    }
}
.xstableList {
    .table_head {
        background: #F5F5F5;
        height: 54px;
        width:100%;
        display: flex;
        align-items: center;
        p {
            height: 54px;
            line-height: 54px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0;
            text-align: center;
        }
    }
    .table_cont {
        border-left: 1px solid #ECEBEB;
        border-right: 1px solid #ECEBEB;
        .table_contli {
            border-bottom: 1px solid #ECEBEB;
        }
        p {
            margin-bottom:0;
        }
        .xswtinfo {
            display: flex;
            align-items: center;
            border-left: 1px solid #ECEBEB;
            border-right: 1px solid #ECEBEB;
        }
        .xswtLbmc {
            width: 120px;
            text-align:center;
        }
        .xswtlist {
            flex:1;
            border-left: 1px solid #ECEBEB;
            .xswtdetail {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ECEBEB;
                &:last-child {
                    border-bottom: none;
                }
            }
            .xswtMc {
                flex:1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10px;
                border-right: 1px solid #ECEBEB;
                min-height:60px;
            }
            .xsselect {
                width: 140px;
                min-height:60px;
                text-align:center;
                border-right: 1px solid #ECEBEB;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .xsarea {
                width:260px;
                display: flex;
                justify-content: center;
                align-items: center;
                textarea {
                    width: 90%;
                    min-height: 50px;
                    outline: none;
                    border: 1px solid #ECEBEB;
                    border-radius: 4px;
                }
            }
        }
    }
    .flex_box {
        display: flex;
        align-items: center;
    }
    .flex0 {
        width: 70px;
        text-align:center;
    }
    .flex1 {
        flex:1;
    }
    .flex01 {
        width: 140px;
    }
    .flex02 {
        width: 260px;
    }
    .flex2 {
        flex:2;
    }
}
.xslist_right_title2 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 25px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
</style>
<style lang="less" scoped>
.historylist {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .historylist_right {
        width:100%;
    }
}

</style>